<template>
  <div>
    <PhysicalTools ref="edit_box" v-bind:type_info="'编辑'" v-bind:edit_form="info" @listData='listData' @warningDialog='warningDialog' :addr_group_list='addr_group_list' />

    <PhysicalTools ref="show_box" v-bind:type_info="'查看'" v-bind:edit_form="info" @listData='listData' @warningDialog='warningDialog' :addr_group_list='addr_group_list' />

    <el-table size='mini' ref="multipleTable" :data="addr_group_list" tooltip-effect="dark" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column prop="strPhysicsName" :label="$t('接口名称')" width="80">
      </el-table-column>
      <el-table-column prop="cDevOtherName" :label="$t('别名')" width="80">
        <template slot-scope="scope">
          <tooltip :html="scope.row.cDevOtherName" :content="scope.row.cDevOtherName" class="wid190" :refName="scope.row.cDevOtherName"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="enPortMode" :label="$t('模式')" width="100" :formatter="handel_enPortMode">
      </el-table-column>
      <el-table-column align='center' prop="ePortOrlPort" :label="$t('网口类型')" width="130">
        <template slot-scope="scope">
          {{ ePortOrlPortList[scope.row.ePortOrlPort] || scope.row.ePortOrlPort }}
        </template>
      </el-table-column>
      <el-table-column prop="ipv4" :label="$t('IPv4/子网掩码')" min-width="200">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIPv4(scope.row, ';<br/>')" :content="classMapShowIPv4(scope.row, ',')" class="wid190" :refName="scope.row.TunnelName"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ipv6" :label="$t('IPv6/前缀')" min-width="200">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIPv6(scope.row, ';<br/>')" :content="classMapShowIPv6(scope.row, ',')" class="wid190" :refName="scope.row.TunnelName"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="cMAC" :label="$t('MAC地址')" width="150">
      </el-table-column>
      <el-table-column prop="bLinkStatus" :label="$t('链路状态')" width="85" :formatter="bLinkStatus">
      </el-table-column>
      <el-table-column prop="bPortStatus" :label="$t('状态')" width="80" :formatter="bPortStatus">
      </el-table-column>
      <el-table-column prop="iMtu" :label="$t('Mtu值')" width="80">
      </el-table-column>
      <el-table-column prop="bandwidth" :label="$t('速率')" width="80">
      </el-table-column>
      <el-table-column prop="sys" fixed="right" :label="$t('操作')" width="170">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="get_physical_info(scope.row, 0)" :class="'config' + scope.$index">
            {{$t('配置')}}
          </el-button>
          <el-button type="primary" plain size="mini" @click="get_physical_info(scope.row, 1)" :class="'check' + scope.$index">
            {{$t('查看')}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog  custom-class="warningInfo-custom" ref="warningCustom" :title="$t('告警信息')" :visible.sync="dialogVisible" width="505px" top="30vh" :close-on-click-modal='false' class="warningInfo">
      <template slot="title">
        <span style="font-size:18px;line-height: 1;color: #303133;">{{$t('告警信息')}}</span>
        <el-tooltip class="item" effect="light" placement="right">
          <div slot="content">{{$t('告警信息，仅仅提示用户有些配置不支持，不影响整体配置下发与功能使用')}}</div>
          <svg-icon icon-class="question" style="color:#666;font-size:16px;" />
        </el-tooltip>
      </template>
      <span style="white-space: pre-wrap">{{msg}}</span><br>
      <el-table size='mini' ref="multipleTable" v-if="tableList.length > 0" :data="tableList" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="name" :label="$t('引用模块名称')" align='center' min-width="100">
          <template slot-scope="scope">
            <tooltip :copyText="modeList[scope.row.name] || scope.row.name" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="value" :label="$t('引用名称')" align='center' min-width="100">
          <template slot-scope="scope">
            <tooltip :copyText="scope.row.value" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false;msg = '';tableList = [];" size="small">{{$t('确 定')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PhysicalTools from './components/PhysicalTools'
import { getPhysicalApiArray, getPhysicalApiInfo } from '@/api/network/api/physical'
import { getMgmtMode } from '@/api/system/log'
export default {
  name: 'Physical',
  components: {
    PhysicalTools
  },
  data () {
    return {
      addr_group_list: [],
      info: {},
      tableData: [],
      editVisible: false,
      dialogVisible: false,
      msg: '',
      multipleSelection: [],
      tableList: [],
      modeList: {},
      ePortOrlPortList: {
        'ePort': this.$t('电口'),
        'lPort': this.$t('光口')
      }
    }
  },
  watch:{
    dialogVisible(value) {
      if(value) {
       this.$nextTick(() => {
        this.$refs.warningCustom.$el.querySelector('.el-dialog__wrapper .el-dialog .el-dialog__body').classList.add('my-warning-dialog')
       })
      }
    }
  },
  created () {
    this.listData()
  },
  methods: {
    listData () {
      getPhysicalApiArray().then(res => {
        this.addr_group_list = res.info
      })
    },
    warningDialog (data) {
      this.msg = data.msg
      this.dialogVisible = true
      if (Object.keys(data.info).length > 0) {
        this.tableList = []
        for (let item in data.info) {
          this.tableList.push({ name: item, value: data.info[item] })
        }
        getMgmtMode().then(res => {
          this.modeList = {}
          for (let item of res.info) {
            this.modeList[item.name] = item.chinese_name
          }
        })
      }
      this.listData()
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handel_ipv4_array (row) {
      if (row.ipv4) {
        let test = ''
        row.ipv4.forEach((item, index, array) => {
          if (item.cPortIpv4 !== '') {
            test += item.cPortIpv4 + '/'
          }
          if (item.cPortNetmask !== '') {
            test += item.cPortNetmask
          }
        })
        return test
      }
    },
    handel_ipv6_array (row) {
      if (row.ipv4) {
        let test = ''
        row.ipv6.forEach((item, index, array) => {
          if (item.cPortIpv6 !== '') {
            test += item.cPortIpv6 + '/'
          }
          if (item.cDevIpv6Prefix !== '') {
            test += item.cDevIpv6Prefix
          }
        })
        return test
      }
    },
    bPortStatus (row) {
      switch (row.bPortStatus) {
        case 'up':
          return this.$t('开启')
        case 'down':
          return this.$t('关闭')
      }
    },
    handel_enPortMode (row) {
      switch (Number(row.enPortMode)) {
        case 0:
          return this.$t('路由模式')
        case 1:
          return this.$t('透明模式')
        case 2:
          return this.$t('聚合模式')
        case 3:
          return this.$t('虚拟线模式')
      }
    },
    bLinkStatus (row) {
      switch (Number(row.bLinkStatus)) {
        case 0:
          return 'down'
        case 1:
          return 'up'
      }
    },

    get_physical_info (row, which) {
      let formData = {}
      formData.name = row.strPhysicsName
      getPhysicalApiInfo(formData).then((response) => {
        this.tableData = []
        const info = response.info[0]
        if(info.ipv6 && info.ipv4.length) {
            for(let i = info.ipv4.length - 1; i >= 0;i--) {
            if(!info.ipv4[i].cPortIpv4) {
              info.ipv4.splice(i,1)
            }
          }
          }
          if(info.ipv6 && info.ipv6.length) {
             for(let i = info.ipv6.length - 1; i >= 0;i--) {
            console.log(info.ipv6[i].cDevIpv6Prefix)
            if(!info.ipv6[i].cDevIpv6Prefix) {
              info.ipv6.splice(i,1)
            }
          }
          }

        this.info = info
        if (typeof this.info.iAllowed === 'object') {
          let text = ''
          // 修改Trunk VlanId的值用，从1，2，3格式改成1-3
          let newNum = 0 // 如果有连续数字则等于连续数的开始
          let oldNum = 0 // 连续数的末尾
          let flag = false // 进入连续数的标识
          this.info.iAllowed.forEach((item, index) => {
            if (index === 0) { // 初始值
              newNum = item.AllowedVlanId
              text += item.AllowedVlanId
            } else {
              if (flag) {
                // 进入连续数
                if (item.AllowedVlanId === (oldNum + 1)) {
                  oldNum = item.AllowedVlanId
                } else {
                  text += oldNum
                  text += ',' + item.AllowedVlanId
                  newNum = item.AllowedVlanId
                  oldNum = 0
                  flag = false
                }
              } else {
                // 未进入连续数
                if (item.AllowedVlanId === (newNum + 1)) {
                  flag = true
                  oldNum = item.AllowedVlanId
                  text += '-'
                } else {
                  newNum = item.AllowedVlanId
                  text += ',' + item.AllowedVlanId
                }
              }
            }
          })
          if (flag) {
            text += oldNum
          }
          this.info.iAllowedStr = text
        }
        if (which === 0) {
          this.$refs.edit_box.edit_info()
        } else {
          this.$refs.show_box.edit_info()
        }
      })
    },
    classMapShowIPv4 (data, str) {
      let reStr = ''
      if (data.ipv4) {
        data.ipv4.forEach((item, index) => {
          if (item.cPortIpv4 && index === (data.ipv4.length - 1) && str === ',') {
            reStr += item.cPortIpv4 + '/' + item.cPortNetmask
          } else if (item.cPortIpv4) {
            reStr += item.cPortIpv4 + '/' + item.cPortNetmask + str
          }
        })
      }
      return reStr
    },
    classMapShowIPv6 (data, str) {
      let reStr = ''
      if (data.ipv6) {
        data.ipv6.forEach((item, index) => {
          if (item.cPortIpv6 && index === (data.ipv6.length - 1) && str === ',') {
            reStr += item.cPortIpv6 + '/' + item.cDevIpv6Prefix
          } else if (item.cPortIpv6) {
            reStr += item.cPortIpv6 + '/' + item.cDevIpv6Prefix + str
          }
        })
      }
      return reStr
    }
  }
}
</script>
<style lang='scss'>
.warningInfo {
  .el-dialog__body {
    padding: 10px 15px !important;
  }
  .el-dialog__header {
    padding: 15px 15px 10px !important;
  }
  .el-dialog__footer {
    padding: 5px 15px 10px !important;
  }
}
</style>
